<template>
  <Card>
    <Row type="flex"
         align="middle"
         justify="space-between"
         class="margin-b-20">
      <Button icon="md-add"
              type="primary"
              @click="onAddShopModal()">添加场馆</Button>
    </Row>
    <Table border
           :loading="tableLoading"
           :columns="columns"
           :data="storeList">
    </Table>

    <Modal v-model="addShopModel"
           :title=" shoType ? '编辑场馆' :'添加场馆'"
           :loading="loading"
           :mask-closable="false"
           @on-ok="onAddStore"
           @on-visible-change="onAddStoreVisible">
      <Form ref="addStoreForm"
            :model="shop"
            :rules="ruleValidate"
            :label-width="80">
        <FormItem label="场馆名"
                  prop="storeName">
          <Input v-model="shop.storeName"
                 style="width:200px"></Input>
        </FormItem>
        <FormItem label="地址"
                  prop="address">
          <Input v-model="shop.address"
                 maxlength="100"
                 show-word-limit
                 type="textarea"
                 placeholder="请输入地址..."
                 style="width: 200px" />
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>
<script>
import { mapActions } from 'vuex'
import { storeList, addStore, updateStore, deleteStore } from '@/api/setting-shop'
export default {
  data () {
    return {
      shoType: 0,
      loading: true,
      shop: {
        address: '',
        storeName: ''
      },
      ruleValidate: {
        address: [{ required: true, message: '请输入场馆地址', trigger: 'blur' }],
        storeName: [
          {
            required: true,
            message: '请输入场馆名',
            trigger: 'blur'
          }
        ]
      },
      columns: [
        {
          title: '场馆名',
          key: 'storeName'
        },
        {
          title: '地址',
          key: 'address'
        },
        {
          title: '操作',
          width: 150,
          key: 'action',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.onAddShopModal(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.deleteStore(params.row.id)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      storeList: [],
      addShopModel: false,
      tableLoading: false
    }
  },
  created () {
    this.getStoreList()
  },
  methods: {
    ...mapActions([
      'setStoreList'
    ]),
    onAddShopModal (info) {
      this.addShopModel = true
      if (info) {
        this.shoType = 1
        this.shop = { ...info }
      } else {
        this.shoType = 0
      }
    },
    getStoreList () {
      this.tableLoading = true
      storeList({}).then(res => {
        this.storeList = res.data.records
        this.tableLoading = false
        this.setStoreList()
      }).catch(() => {
        this.tableLoading = false
      })
    },
    onAddStoreVisible (visible) {
      // 弹框状态改变 清除默认值
      if (visible) return
      this.$refs['addStoreForm'].resetFields()
    },
    onAddStore () {
      this.$refs['addStoreForm'].validate(valid => {
        // eslint-disable-next-line no-useless-return
        setTimeout(() => {
          this.loading = false
        }, 300)
        setTimeout(() => {
          this.loading = true
        }, 400)
        if (!valid) return
        this.shoType ? this.updateStore() : this.addStore()
      })
    },
    addStore () {
      addStore(this.shop).then(res => {
        this.$refs['addStoreForm'].resetFields()
        this.addShopModel = false
        this.$Message.success('添加成功')
        this.getStoreList()
      })
    },
    updateStore () {
      updateStore(this.shop).then(res => {
        this.$refs['addStoreForm'].resetFields()
        this.addShopModel = false
        this.$Message.success('修改成功')
        this.getStoreList()
      })
    },
    deleteStore (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除？',
        loading: true,
        okText: '删除',
        onOk: () => {
          deleteStore(id)
            .then(res => {
              this.$Modal.remove()
              this.$Message.success('删除成功')
              this.getStoreList()
            })
            .catch(() => {
              this.$Modal.remove()
            })
        }
      })
    }
  }
}
</script>
<style lang="less">
.userAssets {
  position: relative;
  font-size: 16px;
  text-align: center;
  .userAssets-num {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
